
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>我的课程</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap/bootstrap.min.css" media="all">
  </head>
  <body class="m-3" style="font-size: 0.9rem;">
    <%--    搜索栏--%>
    <div class="d-flex">
      <div class="col-auto">
        <input id="courseName" value="" placeholder="请输入课程名称" class="form-control form-control-sm"/>
      </div>
      <button id="searchBtn" class="layui-btn layui-btn-primary layui-btn-sm ">
        <i class="layui-icon layui-icon-search"></i>搜索
      </button>
      <button id="resetBtn" class="layui-btn layui-btn-danger layui-btn-sm "><i
        class="layui-icon layui-icon-close"></i>重置
      </button>
    </div>
    <%--      表格容器--%>
    <table id="selectTable" lay-filter="selectTable"></table>
    <%--      表头工具栏--%>
    <script id="headerBar" type="text/html">
    
    </script>
    <script src="${pageContext.request.contextPath}/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/lay-config.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/http.js" charset="utf-8"></script>
    <script>
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var layer = layui.layer;
            //渲染表格
            table.render({
                elem: '#selectTable',
                url: '/studentCourse.do?method=list',
                height: 'full-80',
                toolbar: '#headerBar',
                cols: [[
                    {field: 'courseName', title: '课程名称'},
                    {field: 'courseNum', title: '课程编号'},
                    {field: 'courseType', title: '类型'},
                    {field: 'courseCount', title: '学时'},
                    {field: 'coursePoint', title: '学分'},
                    {field: 'address', title: '授课地址'},
                    {field: 'majorName', title: '所属专业'},
                    {field: 'teacherName', title: '授课教师'}
                ]],
                page: true,
                limit: 10,
                limits: [10, 20, 30, 50]
            })
            //搜索按钮添加点击事件
            $("#searchBtn").click(function () {
                reload();
            })
            //重置按钮点击事件
            $("#resetBtn").click(function () {
                //清空表单
                $("#courseName").val('');
                reload()
            })

            //表格重载
            function reload() {
                table.reload('selectTable', {
                    where: { //设定异步数据接口的额外参数，任意设
                        courseName: $("#courseName").val()
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据
            }
        })
    </script>
  </body>
</html>
